<template>
  <div>
      
      <div class="box">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
          <p>6</p>
          <p>7</p>
          <p>8</p>
          <p>9</p>
          <p>9</p>
          <p>9</p>
          <p>9</p>
          <p>9</p>
      </div>
      <!-- 
          当我们给元素设置为弹性盒子之后，里面的子元素会默认沿着主轴排列。
       -->
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 300px;
    height: 200px;
    border: 2px solid red;
    display: flex;
    flex-wrap: wrap;  /**超出换行 */
}
p{
    width: 40px;
    border: 2px solid blue;
    height: 40px;
}
</style>